import React from 'react';
import {Layout, Spin} from 'antd';
import Routers from '../routers/routers';
import SysMenu from '../../components/menu/sysMenu';
import SysHeader from '../../components/header/sysHeader';
import {injectIntl} from 'react-intl';
import {loadMenus} from "../../redux/menu/menu.redux";
import {apiLogout} from '../../redux/login/login.redux';
import {connect} from "react-redux";
import axios from 'axios';
import { Prompt } from 'react-router'


const {Content, Footer} = Layout;

@connect(state => state.menu, {loadMenus, apiLogout})
class Main extends React.Component {
    constructor(props) {
        super(props);
        this.reqInterceptors();
        this.repInterceptors();
        this.state = {
            marginLeft: 220,
            loading: false,
            button: []
        }
        this.setMarginLeft = this.setMarginLeft.bind(this);
    }

    setMarginLeft() {
        this.state.marginLeft == 0 ?
            this.setState({
                marginLeft: 220
            }) :
            this.setState({
                marginLeft: 0
            });

    }

    repInterceptors() {
        axios.interceptors.response.use((response) => {
                if (this.state.loading === true) {
                    this.setState({
                        loading: false
                    });
                }
                if (response&&response.data&&response.data.code === '402') {
                    this.props.apiLogout();
                    return response;
                }
                return response;
            }
        )
    }

    reqInterceptors = () => {
        axios.interceptors.request.use((config) => {
            if (config.loading === true) {
                this.setState({
                    loading: true
                });
            }
            return config;
        });
    };

    componentWillReceiveProps(nextProps) {
        this.setState({
            button: nextProps.button
        })
    }

    render() {
        // authFun(this.state.button, document.querySelectorAll('[data-auth]'));
        return (
            <Layout hasSider="true">
                {/*左侧菜单栏*/}
                {/*<Prompt message="Are you sure you want to leave?"/>*/}
                <SysMenu width={this.state.marginLeft}/>
                <Layout style={this.state}>
                    {/*头部*/}
                    <SysHeader setSize={this.setMarginLeft} marginLeft={this.state.marginLeft}/>
                    {/*内容*/}
                    <Spin spinning={this.state.loading}>
                        <Content className="SC-main">
                            <div style={
                                {padding: 24, background: '#fff', minHeight: 'calc(100vh - 168px)'}
                            }>
                                <Routers/>
                            </div>
                        </Content>
                    </Spin>
                    {/*底部*/}
                    <Footer style={{
                        textAlign: 'center',
                        height: 48,
                        boxSizing: 'border-box',
                        lineHeight: '48px',
                        padding: 0,
                        background: 'rgb(255, 255, 255)'
                    }}>
                        COPYRIGHT ©2018  All rights reserved. 苏ICP备14056214号-2
                    </Footer>
                </Layout>
            </Layout>
        );
    }
}

export default injectIntl(Main);